<template>
  <div style="height: 100%; margin: 0 100px">
    <table class="dw-form-table">
      <tbody>
        <tr>
          <td class="dw-td-label"><span>来源项目：</span></td>
          <td>
            <el-form-item prop="sourceProjectId">
              <el-select v-model="formData.sourceProjectId" placeholder="请选择来源项目" clearable>
                <el-option v-for="item in sourceProjectList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </td>
          <td class="dw-td-label">目标项目：</td>
          <td>
            <el-form-item prop="targetProjectId">
              <el-select v-model="formData.targetProjectId" placeholder="请选择目标项目" clearable>
                <el-option v-for="item in targetProjectList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="dw-td-label">克隆说明：</td>
          <td :colspan="3">
            <el-form-item prop="layer">
              <div style="color: red; font-weight: bold">项目克隆将会清空目标项目的数据，然后将来源项目的数据复制到目标项目中去，一旦确认操作，目标项目数据将无法恢复，请谨慎操作</div>
            </el-form-item>
          </td>
        </tr>
      </tbody>
    </table>
    <div style="display: flex; justify-content: center; height: 60px; align-items: center">
      <el-button type="primary" :disabled="!formData.sourceProjectId && !formData.targetProjectId"> 项目克隆 </el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';

/**
 * 项目数据克隆
 */
defineOptions({
  name: 'ProjectDataClone',
});

const formData = reactive({
  sourceProjectId: '',
  targetProjectId: '',
});
const sourceProjectList = [{ value: '01', label: '厦门市第一人民医院' }];
const targetProjectList = [{ value: '02', label: '厦门市中医药' }];
</script>
